<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>base</title>
<!-- Bootstrap core CSS -->
<link href="../../asserts/bootstrap-3.3.0/css/bootstrap.min.css" rel="stylesheet">
<!--lib js  -->
<script type="text/javascript" src="../../asserts/jquery-1.11.3/jquery.min.js"></script>
<!-- js加载器 -->
<script type="text/javascript" src="../../src/core/jui.config.js"></script>
<script type="text/javascript" src="../../src/loader/loader.js"></script>
<script type="text/javascript">
var gridData = {"currentPageIndex":1,"firstPageIndex":1,"isError":false,"lastPageIndex":1,"nextPageIndex":1,"pageCount"
		:1,"pageIndex":1,"pageSize":50,"prePageIndex":1,"rows":[{"address":"杭州XXX大街12号","cityName":"杭州27","createDate"
		:"2015-05-05","mobile":"13722222222","orderId":27},{"address":"222","cityName":"26","createDate":"2015-05-28"
		,"mobile":"13777777222","orderId":26},{"address":"杭州XXX大街12号","cityName":"杭州","createDate":"2015-05-05"
		,"mobile":"13722222222","orderId":25},{"address":"杭州XXX大街12号","cityName":"杭州","createDate":"2015-05-05"
		,"mobile":"13722222222","orderId":24}],"start":0,"success":true,"total":21}
</script>

</head>
<body>

<h3>普通样式</h3>
<div id="grid"></div>
<h3>鼠标悬停高亮</h3>
<div id="grid2"></div>
<h3>斑马线</h3>
<div id="grid3"></div>
<h3>单元格边框</h3>
<div id="grid4"></div>

<script type="text/javascript">

var columns = [ [
		{
		field : 'cityName',
		title : '城市'
	},
	{
		field : 'mobile',
		title : '手机号'
	},
	{
		field : 'address',
		title : '地址'
	},
	{
		field : 'createDate',
		title : '创建时间'
	}] 
]

JUI
.dir('../../src/') // 设置JS存放根目录
.use('Grid',function(){
	new JUI.Grid({
		renderId:'grid'
		,data : gridData
		,striped:false // 斑马线,默认true
		,hover:false // 移动高亮,默认true
		,bordered:false // 表格边框,默认true
		,columns : columns
	});
	
	new JUI.Grid({
		renderId:'grid2'
		,data : gridData
		,striped:false // 斑马线,默认true
		,hover:true // 移动高亮,默认true
		,bordered:false // 表格边框,默认true
		,columns : columns
	});
	
	new JUI.Grid({
		renderId:'grid3'
		,data : gridData
		,striped:true // 斑马线,默认true
		,hover:false // 移动高亮,默认true
		,bordered:false // 表格边框,默认true
		,columns : columns
	});
	
	new JUI.Grid({
		renderId:'grid4'
		,data : gridData
		,striped:false // 斑马线,默认true
		,hover:false // 移动高亮,默认true
		,bordered:true // 表格边框,默认true
		,columns : columns
	});
});



</script>
</body>
</html>